<template>
  <div class="box">
    <div class="info">
      <!-- 头像 -->
      <img class="avater" src="" alt="">
      <!-- 关注部分 -->
      <div class="fans">
        <ul>
          <li>关注
            <span>0</span>
          </li>
          <li>粉丝
            <span>0</span>
          </li>
          <li>获赞
            <span>0</span>
          </li>
        </ul>
      </div>
      <!-- id盒子 -->
      <div class="id">
        <div class="username">有梦想的_Keeper5v5g</div>
        <span>进度条</span>
        <span>标志</span>
        <span>个人主页</span>
      </div>
    </div>
    <div class="rest">
      <!--订单区 -->
      <div class="orderList">
        <ul>
          <li><span>我的订单</span></li>
          <li><span>我的活动</span></li>
          <li><span>我的装备</span></li>
          <li><span>健身房</span></li>
        </ul>
          <p>我的课程</p>
      </div>
      <!-- 我的课程区 -->
       <div class="list">
    <ul>
      <li><span>收藏</span><span>0节课程</span></li>
      <li><span>收藏</span><span>0节课程</span></li>
      <li><span>收藏</span><span>0节课程</span></li>
      <li><span>收藏</span><span>0节课程</span></li>
      <li><span>收藏</span><span>0节课程</span></li>
    </ul>
  </div>
    <!-- time and tizhong -->
    <div class="box2">
      <div class="left">
        <p>总运动</p>
        <span>分钟</span>
        <span>本周消耗0千卡</span>
      </div>
      <div class="right">
        <p>体重</p>
        <span>公斤</span>
        <span>上次记录31天前</span>
      </div>
    </div>
    <!-- 相册 -->
    <div class="photo">
      <p>
        <span>动态相册</span>
        <span>查看全部</span>
      </p>
      <div class="containner">
      </div>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'CardInfo',
  data () {
    return {
    }
  },
  components: {
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
}
.orderList {
  width: 95%;
  height: 4rem;
  background-color: #ffffff;
  margin-left: 0.5rem;
  margin-bottom:1rem ;
  border-radius: 4% 4% 4% 4%;
}
.orderList ul {
  display: flex;
  justify-content: space-between;
}
.orderList ul li {
  position: relative;
  width: 4rem;
  height: 1rem;
  margin-top: 2rem;
}
.orderList ul span {
  display: inline-block;
  width: 4rem;
  height: 1rem;
  position: absolute;
}
.fans {
  position:absolute;
  top: 0.8rem;
  right: 0rem;
  width: 14rem;
  height: 3rem;
  background-color: #ffffff;
}
.id {
  position: absolute;
  width: 100%;
  height: 3.5rem;
  background-color: #ffffff;
  margin-top: 3.8rem;
}
.id .username {
  /* position: absolute; */ // 会脱离文档流，浮动起来
  width: 12rem;
  height: 2rem;
  margin-left: 1.2rem;
  font-size: 1.2rem;
}
.id span {
  display: block;
  position: absolute;
  width: 4.7rem;
  height: 1.5rem;
  top: 1.7rem;
  border: 0.1rem solid gray;
  border-radius: 17% 17%  17% 17%;
  text-align: center;
  line-height: 1.5rem;
    font-size: 0.8rem;
}
.id span:nth-of-type(1) {
  margin-left: 1.2rem;
}
.id span:nth-of-type(2) {
  margin-left: 7rem;
}
.id span:nth-of-type(3) {
  right: 1.5rem;
}
.fans ul li {
  float: left;
  margin-right: 2.6rem;
}
.fans ul li span {
  display: inline-block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  margin-top: 1rem;
  margin-left: -2rem;
}
.avater {
  position: absolute;
  display: inline-block;
  width: 5rem;
  height: 5rem;
  top: -1.5rem;
  left: 1.2rem;
  background-color: #be7878;
  border-radius: 50%;
}
.info {
  position: relative;
  margin-top: 5rem;
  width: 100%;
  height: 7.3rem;
  background-color: #ffffff;
  border-radius: 4% 4% 0 0;
/*   overflow: hidden; */
}
.rest {
  width: 100%;
  height: 35rem;
  background-color: #fafafa;
  overflow: hidden;
}

// list 组件样式
.list {
  width: 95%;
  height: 4.75rem;
  margin-left: 0.5rem;
  margin-bottom: 1rem;
  background-color: #ffffff;
  overflow: auto;
}
p {
  position: relative;
  font-size: 0.8rem;
  top: 1.8rem;
  left: 0.7rem;
}
.list ul {
  height: 100%;
  width: 220%;
  white-space: nowrap; // 强制不换行
}
.list::-webkit-scrollbar {
  display: none;
}
.list ul li {
  position: relative;
  float: left;
  margin-right: 5.16rem;
  margin-top: 0.8rem;
  width: 4rem;
  height: 4rem;
  background-color: #dbdbdb;
  border-radius: 5%;
}
.list ul li span:nth-child(1) {
  position: absolute;
  display: inline-block;
  font-size: 0.8rem;
  margin-top: 0.5rem;
  width: 2rem;
  margin-left: 4.55rem;
}
.list ul li span:nth-child(2) {
  position: absolute;
  display: inline-block;
  width: 2.7rem;
  margin-top: 2.4rem;
  font-size: 0.7rem;
  margin-left: 4.55rem;
}
//
.box2 {
  display: flex;
  justify-content: space-between;
  width: 95%;
  height: 5rem;
  margin-left: 0.5rem;
  background-color: #fafafa;
}
.box2 div {
  position: relative;
  width: 10.5rem;
  height: 100%;
  background-color: #ffffff;
  border-radius: 5%;
}
.box2 div p {
  position: relative;
  width: 100%;
  height: 1rem;
  margin-top: -1rem;
  margin-bottom: 0.5rem;
}
.box2 div span {
  display: inline-block;
  position: absolute;
}
.box2 div span:nth-of-type(1) {
  margin-top: 2rem;
  margin-left: 1.5rem;
  font-size: 0.7rem;
}
.box2 div span:nth-of-type(2) {
  margin-top:3.5rem;
  margin-left: 0.8rem;
  font-size: 0.5rem;
}
// 相册
.photo {
  position: relative;
  width: 95%;
  height: 16.5rem;
  margin-left: 0.5rem;
  background-color: white;
  margin-top: 1rem;
  .containner {
    position: absolute;
    margin-top: 1.5rem;
    width: 95%;
    height: 90%;
    margin-left: 0.5rem;
    background-color: #fafafa;
  }
  p {
    position: absolute;
    width: 100%;
    height: 1rem;
    margin-top: -1.5rem;
    span {
      display: inline-block;
      position: absolute;
    }
    span:nth-child(1) {
      left: 0.1rem;
    }
    span:nth-child(2) {
      right: 2.3rem;
      font-size: 0.6rem;
    }
  }
}
</style>
